<template>
  <div
    class="data-card group relative h-full rounded-2xl bg-gradient-to-br from-dashboard-primary/10 to-dashboard-secondary/5 p-6 backdrop-blur-lg transition-all duration-300 hover:shadow-dashboard-lg"
  >
    <div
      class="absolute inset-0 rounded-2xl border border-white/10 bg-[radial-gradient(at_top_right,_var(--tw-gradient-stops))] from-white/5 to-transparent"
    />

    <div class="relative">
      <div class="mb-5 flex items-center justify-between">
        <div class="flex items-center space-x-3">
          <div
            class="flex h-10 w-10 items-center justify-center rounded-xl bg-dashboard-primary/10"
          >
            <slot name="icon"></slot>
          </div>
          <h3 class="text-lg font-semibold text-white">
            <slot name="title"></slot>
          </h3>
        </div>
        <div class="text-sm text-gray-400">
          <slot name="action"></slot>
        </div>
      </div>

      <div class="space-y-4">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<style scoped>
.data-card {
  box-shadow: 0 8px 16px -4px rgba(15, 23, 42, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition-property: box-shadow, transform, background;
}

.data-card:hover {
  transform: translateY(-2px);
}
</style> 